<template>
  <div class="detail-container">
    <div class="detail-container__left">
      <div class="article-container">
        <div class="article__header">
          <div class="header-info">
            <p class="title">{{articleDetail.title}}</p>
            <div class="infos">
              <div class="info-left">
<!--                <div class="icon-box">-->
<!--                  <p class="icon">-->
<!--                    <yun-icon name="hot" size="12px" color="#fff"></yun-icon>-->
<!--                  </p>-->

<!--                  <p class="icon">-->
<!--                    <yun-icon name="like2" size="12px" color="#fff"></yun-icon>-->
<!--                  </p>-->
<!--                </div>-->
                <div class="label-box">
                  <p v-for="(val,index) in articleDetail.tags" :key="val.tagId">{{val.tagName}}</p>
                </div>
              </div>
              <div class="info-right">
                <p class="left">
                 {{dataConvert2(articleDetail.createTime)}}
                </p>
                <div class="right">
<!--                  <div class="icon-box">-->
<!--                    <yun-icon name="star" size="12px" pb="7px"  color="#ccc"></yun-icon>-->
<!--                    <span>4</span>-->
<!--                  </div>-->
<!--                  <div class="icon-box">-->
<!--                    <yun-icon name="like1" size="12px"  pb="7px" color="#ccc"></yun-icon>-->
<!--                    <span>4</span>-->
<!--                  </div>-->
<!--                  <div class="icon-box">-->
<!--                    <yun-icon name="view" size="12px" pb="7px" color="#ccc"></yun-icon>-->
<!--                    <span>{{articleDetail.viewNumber}}</span>-->
<!--                  </div>-->
                </div>
              </div>
            </div>
          </div>
        </div>
        <p class="article__introduce">{{articleDetail.subTitle}}</p>
        <div class="article__content" v-html="articleDetail.content">
        </div>

        <div class="article__footer">
          <p class="link">本文编辑：<span>{{articleDetail.author}}</span></p>
          <p class="report" @click="$router.push({path:'/web/report',query:{type:'news',id:articleDetail.contentId}})">举报</p>
          <div class="project" v-if="false">
            <p>
              <yun-icon name="home" size="12px" style="margin-right: 5px"></yun-icon>项目首页
            </p>
            <p>
              <yun-icon name="project" size="12px" style="margin-right: 5px"></yun-icon>项目文档
            </p>
            <p>
              <yun-icon name="download" size="12px" style="margin-right: 5px"></yun-icon>项目下载
            </p>
          </div>

        </div>
      </div>
    </div>
    <div class="detail-container__right">
      <card-container title="最新资讯" label="换一换" more="更多" @listenCardConMore="$router.push('/news')">
        <nuxt-link tag="div" :to="'/news/detail/'+val.contentId" class="information-wrap" v-for="(val,index) in newsList" :key="val.contentId">
          <p class="information-time">{{dataConvert2(val.createTime)}}</p>
          <p class="information-content">{{val.title}}</p>
        </nuxt-link>
      </card-container>

      <card-container
        title="热门标签"
        width="302px"
        style="margin-top: 16px;max-height: 446px;"
      >
        <div class="tags-wrap">
          <div class="tag-box" v-for="(item, index) in hotTagsList" :key="item.tagId">
            <span>{{item.tagName}}</span>
            <span>（{{item.referenceCount}}）</span>
          </div>
        </div>
      </card-container>
    </div>

<!--    <div class="article-option">-->
<!--      <div class="option-item">-->
<!--        <yun-icon name="star" class="star"></yun-icon>-->
<!--      </div>-->

<!--      <div class="option-item">-->
<!--        <yun-icon name="like1" class="like"></yun-icon>-->
<!--      </div>-->

<!--      <div class="option-item">-->
<!--        <yun-icon name="comment" class="comment"></yun-icon>-->
<!--      </div>-->
<!--      <div class="share-word">分享</div>-->

<!--      <div class="option-item">-->
<!--        <embed src="../../../assets/svg/weibo.svg" width="18" height="21"-->
<!--               type="image/svg+xml"-->
<!--               pluginspage="http://www.adobe.com/svg/viewer/install/" />-->
<!--      </div>-->

<!--      <div class="option-item">-->
<!--        <embed src="../../../assets/svg/wechat.svg" width="18" height="21"-->
<!--               type="image/svg+xml"-->
<!--               pluginspage="http://www.adobe.com/svg/viewer/install/" />-->
<!--      </div>-->

<!--      <div class="option-item">-->
<!--        <embed src="../../../assets/svg/qq.svg" width="18" height="21"-->
<!--               type="image/svg+xml"-->
<!--               pluginspage="http://www.adobe.com/svg/viewer/install/" />-->
<!--      </div>-->
<!--    </div>-->
  </div>
</template>


<script>

  import UserCard from '../../../components/pc/userCard';
  import SocialContactCard from '../../../components/pc/socialContactCard';
  import CardContainer from '../../../components/pc/cardContainer';
  import CommentCon from '../../../components/pc/comment/commentCon';
  import config from '../../../action/config'
  import {dateConvert} from "../../../action/utils/dataConvert";
  import {globalBus} from '../../../components/common/globalBus'

  import hljs from 'highlight.js'

  export default {
    async asyncData ({ $axios ,params}) {
      let articleDetail = await $axios.$get(config.api.get.Content.detail+params.id);
      return {articleDetail:articleDetail.data}
    },

    head () {
      return {
        title: this.articleDetail.title + ' - 云里云外开源社区',
        meta: [
          { hid: 'description', name: 'description', content:  this.articleDetail.subTitle },
        ]
      }
    },
    data(){
      return{
        commentContent:'',
        commentList:[],
        hotTagsList:[],
        newsList:[],

      }
    },



    created(){
      this.dataGetHotTagsList();
      this.dataGetNewsList();
      globalBus.$emit(config.event.listenDetailInfo,this.articleDetail.blogTitle,'blog')
    },


    mounted(){
      this.highlightCode();
    },

    methods:{
      dataConvert2(time){
        return dateConvert(time)
      },
      highlightCode () {
        if(process.browser){
          this.$hljs.initHighlightingOnLoad();
          this.$hljs.initLineNumbersOnLoad({
            singleLine: true
          });
          const preEl = document.querySelectorAll('pre');
          preEl.forEach((el) => {
            this.$hljs.highlightBlock(el)
          //  this.$hljs.lineNumbersBlock(el);
          })
        }

      },
      dataGetNewsList() {
        let params = {
          page: 1,
          size: 5,
          type: 1
        };
        this.$axios.$get(config.api.get.Content.list + '/13/contents',
          {
            params: params
          }).then((response) => {
          this.newsList = response.data.dataList;
        })
      },
      dataGetHotTagsList(){
        let params={
          page:1,
          size:7
        };
        this.$axios.$get(config.api.get.Tag.hotTags,{params:params})
          .then((response)=>{
            this.hotTagsList = response.data.dataList;
          })

      },
    },

    components:{
      UserCard,SocialContactCard,CardContainer,CommentCon
    },
  }


</script>


<style lang="scss" >
  .detail-container {


    width: $pageWidth;
    margin: 16*$length auto;
    @extend %flex-row-spb;
    align-items: flex-start;
    @extend %detail-container;
  }

  .tags-wrap{
    padding: 10*$length 10*$length 30*$length;
    .tag-box{
      display: inline-block;
      margin-right: 10*$length;
      margin-bottom: 10*$length;
      padding: 2*$length 9*$length;
      background-color: #F4F8FA;
      @include border-radius(2*$length);
      @extend %cursorPointer;
      @extend %animate-transition;
      @include fontStyle(12, 22, 500, #999, center);
      &:hover {
        color: #fff;
        background-color: #00AAE6;
      }
    }
  }
  .information-wrap {
    padding:12*$length 16*$length 0;
    box-sizing: border-box;
    width:302*$length;
    &:hover{
      .information-time{
        color:rgba(0,170,230,.6);
      }
      .information-content{
        color:rgba(0,170,230,1);

      }
    }
    .information-time {
      @extend %cursorPointer;
      @include fontStyle(12, 16, 500, #CCC, left);
      @extend %animate-transition;

      @extend %nowrap;
    }
    .information-content {
      width: 100%;
      overflow: hidden;
      margin-top: 5*$length;
      @extend %nowrap;
      @extend %cursorPointer;
      @extend %animate-transition;
      @include fontStyle(14, 19, 500, #333, left);

    }
  }

</style>
